<template>
  <div class="root">
    <wux-toptips id="wux-toptips" />
    <div class="root_padding">
      <wux-swipe-action autoClose v-for="(item,index) in goodsNum" :key="index" useSlots>
        <div class="shopping_outer">
          <div class="selection_box">
            <input type="checkbox" @click="item.select=!item.select" :checked="item.select" />
          </div>
          <!-- <div class="goods_img">
            <i class="icon_img" :style="{background:'url('+item.img+')',backgroundSize:'cover'}"></i>
          </div>-->
          <div class="name_price">
            <p>{{item.title}}</p>
            <span class="dollars">￥</span>
            <span class="money">{{item.salePrice}}</span>
          </div>
          <div class="Add_sub">
            <div class="sub add-min" @click="changeAmount(index,false)">-</div>
            <span type="text" class="info">{{item.amount}}</span>
            <div class="add add-min" @click="changeAmount(index,true)">+</div>
          </div>
        </div>
        <div slot="right">
          <view class="delete-button" @click="openLi(index)">删 除</view>
        </div>
      </wux-swipe-action>
    </div>
    <div class="if_none" v-if="show">
      <div class="none_icon_outer">
        <i
          class="none_icon"
          :style="{background:'url(../../static/images/empty.png)',backgroundSize:'cover'}"
        ></i>
        <p>购物车是空的</p>
      </div>
    </div>
    <div class="settlement">
      <div class="select_all float_left">
        <input type="checkbox" @click="selectProduct(isSelectAll)" :checked="isSelectAll" />
        <span>全选</span>
      </div>
      <div class="float_right total">
        <span>合计:</span>
        <span class="dollars">￥</span>
        <span class="money">{{getTotal.totalPrice}}</span>
        <div class="settlement_btn" v-on:click="goSubmit">
          <span>结算</span>
          <span>( {{getTotal.totalNum}} )</span>
        </div>
      </div>
    </div>
  </div>
</template> 

<script>
import { $wuxToptips } from "../../static/wux/index";

export default {
  data() {
    return {
      checked: false,
      show: true,
      checkedNames: []
    };
  },
  onShow() {
    if (this.$store.state.cart.length === 0) {
      wx.removeTabBarBadge({
        index: 2
      })
    } else {
      wx.setTabBarBadge({
        index: 2,
        text: this.$store.state.cart.length + ''
      })
    }
  },
  methods: {
    //增减数量
    changeAmount(index, isPlus) {
      if (isPlus) {
        this.goodsNum[index].amount += 1;
      } else {
        this.goodsNum[index].amount =
          this.goodsNum[index].amount <= 1
            ? 1
            : this.goodsNum[index].amount - 1;
      }
      this.$set(this.goodsNum, index, this.goodsNum[index]);
    },
    //全选与取消全选
    selectProduct(_isSelect) {
      //遍历productList，全部取反
      for (var i = 0, len = this.goodsNum.length; i < len; i++) {
        this.goodsNum[i].select = !_isSelect;
      }
    },
    openLi: function(index) {
      // console.log(index);
      //根据索引删除goodsNum的记录
      this.goodsNum.splice(index, 1);
    },
    goSubmit: function() {
      if (this.goodsNum.length !== 0) {
        this.$store.dispatch("addSubmitGoods", {
          ...this.getTotal,
          goodsNum: this.goodsNum,
          target: 0
        });
        this.$router.push({ path: "/pages/SubmitOrder" });
      } else {
        $wuxToptips().error({
          hidden: false,
          text: "请先添加商品",
          duration: 3000,
          success() {}
        });
        return false;
      }
    }
  },
  mounted: function() {
    wx.showShareMenu();
  },
  computed: {
    goodsNum: function() {
      var _this = this;
      let goodsNumTemp = this.$store.state.cart;
      goodsNumTemp.map(function(item) {
        _this.$set(item, "select", true);
      });
      if (goodsNumTemp.length !== 0) {
        this.show = false;
      } else {
        this.show = true;
      }
      return goodsNumTemp;
    },
    isSelectAll: function() {
      //如果goodsNum中每一条数据的select都为true，返回true，否则返回false;
      return this.goodsNum.every(function(val) {
        return val.select;
      });
    },
    //获取总价和产品总件数
    getTotal: function() {
      //获取goodsNum中select为true的数据。
      var goodsList = this.goodsNum.filter(function(val) {
        return val.select;
      });
      var totalPrice = 0;
      var totalNum = 0; // eslint-disable-line no-unused-vars
      for (var i = 0, len = goodsList.length; i < len; i++) {
        //总价累加
        totalPrice += goodsList[i].amount * goodsList[i].salePrice;
        totalPrice = Math.floor(totalPrice * 100) / 100;

        totalNum += goodsList[i].amount - 0;
      }

      //选择产品的件数就是_proList.length，总价就是totalPrice
      return { totalNum: totalNum, totalPrice: totalPrice };
    }
  }
};
</script>


<style scoped lang="less">
.root {
  height: 100vh;
  background: #f3f3f3;
  overflow-y: auto;
  .root_padding {
    padding: 10px 10px 60px 10px;
    .shopping_outer {
      overflow: hidden;
      padding: 10px 0 10px 10px;
      height: 100px;
      position: relative;
      display: flex;
      .selection_box {
        padding-top: 25px;
        flex: 0.2;
      }
      .icon_img {
        width: 80px;
        height: 80px;
      }
      .name_price {
        flex: 1;
        padding: 5px 10px;
        p {
          font-size: 15px;
          // font-weight: 700;
          margin-bottom: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2; // 2行
          word-break: break-all; // 换行
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
        span {
          color: #c89f62;
          // font-weight: 700;
        }
        .dollars {
          font-size: 12px;
        }
        .money {
          font-size: 20px;
        }
      }
      .Add_sub {
        display: flex;
        flex: 0.5;
        justify-content: center;
        align-items: center;
        padding: 5px;
        div {
          border: 1px solid #bababa;
        }
        .info {
          width: 30px;
          border-right: 0;
          border-left: 0;
          text-align: center;
          flex: 1;
        }
        .add {
          background-color: rgb(243, 201, 64);
        }
        .add-min {
          flex: 0.5;
          border-radius: 50%;
          text-align: center;
        }
      }
    }
    .delete-button {
      width: 80px;
      height: 100%;
      line-height: 125px;
      text-align: center;
      background-color: #c89f62;
      color: #fff;
    }
  }
  .if_none {
    height: 100%;
    overflow: hidden;
    position: relative;
    .none_icon_outer {
      position: absolute;
      top: 40px;
      left: 50%;
      margin-left: -50px;
      .none_icon {
        width: 100px;
        height: 100px;
      }
      p {
        margin-top: 20px;
        text-align: center;
        color: #bababa;
      }
    }
  }
  .settlement {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: #fff;
    z-index: 100;
    .select_all {
      padding: 10px 0 0 15px;
    }
    .float_left {
      float: left;
    }
    .float_right {
      float: right;
    }
    .total {
      padding-top: 3px;
      margin-right: 20px;
      .dollars {
        font-size: 12px;
        color: #C89F62;
      }
      .money {
        color: #C89F62;
        font-size: 16px;
      }
      .settlement_btn {
        margin-left: 10px;
        display: inline-block;
        padding: 6px 8px;
        background: #C89F62;
        color: #fff;
        border-radius: 10px;
      }
    }
  }
}
</style>